<template>
  <div>
    <el-card>
      <el-button type="primary">权限分配</el-button>
    </el-card>

    <el-card style="margin: 15px 0">
      <el-table :data="dynamicTags" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column>
          <template slot-scope="row">
            <el-tag
              :key="row.id"
              v-for="row in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ row.name }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="row.inputVisible"
              v-model="row.inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(row)"
              >+ New Tag</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Qx',
  data() {
    return {
      dynamicTags: [
        {
          id: 0,
          name: '标签1',
          address:'中国'
        },
        {
          id: 1,
          name: '标签2',
          address:'美国'
        },
        {
          id: 2,
          name: '标签3',
          address:'法国'
        },
      ],
      // inputVisible: false,
      // inputValue: '',
    }
  },
  methods: {
    handleClose(row) {
  
    },

    showInput(row) {
      const {row:data} = row
      console.log(data)
      this.$set(data,'inputVisible',true)
      this.$set(data,'inputValue','')
      // this.$nextTick(() => {
      //   // this.$refs.saveTagInput.$refs.input.focus()
      // })
    },

    handleInputConfirm() {
      // let inputValue = this.inputValue
      // if (inputValue) {
      //   this.dynamicTags.push(inputValue)
      // }
      // this.inputVisible = false
      // this.inputValue = ''
    },
  },
}
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
